<template>
    <div class="news-content">
        <div class="banner">
            <img src="/images/news/bc.jpg" alt="">
            <div class="banner-title">专注生产线装备制造</div>
            <div class="sub-title">“汽车工艺装备制造”整体解决方案专家</div>
        </div>


        <div class="article-list">
            <div class="list">
                <div class="title">
                    <div class="bar"></div> 企业资讯
                </div>
                <div class="item" v-for="(item, index) in article_list" :key="item.id">
                    <a @click.prevent="" href="#" class="name">{{ item.name }}</a>
                    <div class="date">2022-10-25</div>
                    <el-divider />

                </div>
            </div>
        </div>




    </div>
</template>

<script setup lang='ts'>
import { reactive } from 'vue';


interface articleType {
    name: string,
    detail?: string,
    id: number
}

let article_list: articleType[] = reactive([
    {
        name: '联合入选！四部委公布《汽车生产者责任延伸试点企业名单》',
        detail: 'saf',
        id: 1
    },
    {
        name: '联合入选！四部委公布《汽车生产者责任延伸试点企业名单》',
        detail: 'saf',
        id: 2
    },
    {
        name: '联合入选！四部委公布《汽车生产者责任延伸试点企业名单》',
        detail: 'saf',
        id: 3
    },
    {
        name: '联合入选！四部委公布《汽车生产者责任延伸试点企业名单》',
        detail: 'saf',
        id: 4
    },
])



</script>

<style scoped lang='scss'>
.news-content {
    width: 100%;
    box-sizing: border-box;




    .banner {
        width: 100%;
        height: 378px;
        position: relative;
        box-sizing: border-box;
        padding: 130px 18%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .banner-title {
            font-size: 46px;
            color: #333;
        }

        .sub-title {
            font-size: 24px;
            color: #4c4c4c;
        }

        img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }
    }

    .article-list {
        width: 100%;
        padding: 30px 18%;
        box-sizing: border-box;
        background-color: #F8F8F8;

        .list {
            width: 100%;
            box-sizing: border-box;
            padding: 20px;
            background-color: #fff;


            .title {
                font-size: 24px;
                padding-left: 15px;
                line-height: 42px;
                display: flex;
                margin-bottom: 20px;


                .bar {
                    width: 5px;
                    height: 40px;
                    margin: 0 20px 0 -10px;
                    background-color: #cc0000;
                }
            }


            .name {
                color: #333;
                width: 80%;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }

            .date {
                width: 100%;
                text-align: right;
                color: hsla(160, 100%, 37%, 1);
            }
        }
    }


}
</style>